<template>
	<view class="body">
		<view class="head">
			<view class="headJpg">
				<u-row gutter="24">
					<u-col span="2">
						<u-avatar :src="src"></u-avatar>
					</u-col>
					<u-col span="8">
						<view>
							<p>
							<h3 class="font">点我登录</h3>
							</p>
							<p class="font">登录可使用更多精彩功能</p>
						</view>
					</u-col>
				</u-row>
			</view>

			<view>
				<u-grid :col="3" :border="false">
					<u-grid-item>
						<u-icon name="car" :size="46"></u-icon>
						<view class="grid-text">车辆</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="car-fill" :size="46"></u-icon>
						<view class="grid-text">优惠劵</view>
					</u-grid-item>
					<u-grid-item>
						<u-icon name="rmb-circle" :size="46"></u-icon>
						<view class="grid-text">钱包</view>
					</u-grid-item>


				</u-grid>

			</view>
			<view>
				<u-cell-group>
					<u-cell-item :title="title" :border-top="false" :arrow="false"></u-cell-item>
					<u-grid :col="4" :border="false">
						<u-grid-item>
							<u-icon name="car" :size="46"></u-icon>
							<view class="grid-text">待付款</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="car-fill" :size="46"></u-icon>
							<view class="grid-text">待服务</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="rmb-circle" :size="46"></u-icon>
							<view class="grid-text">已完成</view>
						</u-grid-item>
						<u-grid-item>
							<u-icon name="rmb-circle-fill" :size="46"></u-icon>
							<view class="grid-text">已取消</view>
						</u-grid-item>
					</u-grid>
				</u-cell-group>
			</view>

			<!--设置-->
			<view style="margin-top: 20rpx;">
				<u-cell-group @click="cellClick(index)">
					<u-cell-item icon="setting-fill" title="我的预约" @click="cellClick" index="1"></u-cell-item>
					<u-cell-item icon="setting-fill" title="维保记录" @click="cellClick" index="2"></u-cell-item>
					<u-cell-item icon="setting-fill" title="车辆管理" @click="cellClick" index="3"></u-cell-item>
					<u-cell-item icon="setting-fill" title="检查报告" @click="cellClick" index="4"></u-cell-item>
					<u-cell-item icon="setting-fill" title="设置" @click="cellClick" index="5"></u-cell-item>
				</u-cell-group>
			</view>
		</view>

	</view>
</template>

<script>
	export default {

		data() {
			return {
				src: '/static/head.jfif',
				text: '无头像',
				title: '我的订单'
			}
		},
		methods: {
			cellClick(index) {
				if (index === "5") {
					this.$u.route({
						url: 'pages/me/setting/index',
						params: {
							name: 'lisa'
						}
					})
				}
			},
			init(data) {

			}
		}
	}
</script>

<style>
	.head {
		width: auto;
		height: 350rpx;
		/* background-color: #ECF5FF; */
	}

	.headJpg {
		text-align: left;
		margin: auto;
		padding: 20px;
		height: 200rpx;
		background-color: #4a90e2;
	}

	.font {
		color: #ECF5FF;
	}

	.body {
		background-color: #808080;
	}
</style>
